<script setup lang="ts">
import router from '../../../../router'
import { h, onMounted, reactive, ref } from 'vue'
import IconVitePress from '../../../../assets/svg/vitePress.svg'
import IconVuePress from '../../../../assets/svg/vuePress.svg'
import { useI18n } from 'vue-i18n'
import { Lang, MessageSchema } from '../../../../locales'
import IconFolder from '../../../../assets/svg/folder.svg'
import Base64Upload from '../../../../components/uploadImg/base64Upload.vue'
import IconGitee from '../../../../assets/svg/gitee.svg'
import IconGithub from '../../../../assets/svg/github.svg'
import { validateRepositoryUrl } from '../../../../utils/regex'
import { NewProject } from '../../../../../../main/type'
import useConfigStore from '../../../../store/useConfigStore'

const { config } = useConfigStore()

const { t } = useI18n<{ message: MessageSchema }, Lang>()

const selectedKeys = ref(['/createNew?type=vite'])
const formRef = ref()

const formState = reactive<NewProject>({
  path: '/Users/wdhcr/Desktop',
  title: 'test',
  description: 'test',
  logo: '',
  openSearch: false,
  footMsg: '未经允许禁止转载',
  copyright: 'copyright © 2024',
  repository: 'https://gitee.com/jack_whh/vitepress-desk.git',
  repositoryType: 'github'
})
const openKeys = ref([])
const items = ref([
  {
    key: '/createNew?type=vite',
    icon: () => h(IconVitePress),
    label: 'VitePress',
    title: 'VitePress'
  },
  {
    key: '/createNew?type=vue',
    icon: () => h(IconVuePress),
    label: 'VuePress',
    title: 'VuePress'
  }
])
const handleSelect = ({ key }) => {
  router.push(key)
}
// 选择项目文件夹
const openProjectFolder = async () => {
  const result = await window.api.selectDirectory()
  if (result) {
    formState.path = result
  }
}

const handleSubmit = () => {
  formRef.value.validate().then(async (res: boolean) => {
    if (res) {
      config.project = formState
      window.api.openMain()
      window.api.setBarTitle({
        type: 'main',
        text: formState.title
      })
      await router.push(`/main`)
    }
  })
}

onMounted(() => {
  window.api.setBarTitle({
    type: 'createProject',
    text: 'New Project'
  })
  router.push('/createNew?type=vite')
})
const back = () => {
  router.push('/create/project')
}
</script>

<template>
  <div class="container">
    <div class="top-container">
      <div class="left">
        <a-divider>Vue</a-divider>
        <a-menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          router
          class="custom-menu"
          mode="inline"
          :items="items"
          @select="handleSelect"
        />
      </div>
      <div class="right">
        <a-form
          ref="formRef"
          :model="formState"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          autocomplete="off"
        >
          <a-form-item
            :label="t('project.path.label')"
            name="path"
            :rules="[{ required: true, message: t('project.path.required') }]"
          >
            <a-input v-model:value="formState.path" allow-clear>
              <template #suffix>
                <IconFolder class="input-folder" @click="openProjectFolder" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            :label="t('project.title.label')"
            name="title"
            :rules="[{ required: true, message: t('project.title.required') }]"
          >
            <a-input v-model:value="formState.title" allow-clear />
          </a-form-item>
          <a-form-item
            :label="t('project.description.label')"
            name="description"
            :rules="[{ required: true, message: t('project.description.required') }]"
          >
            <a-input v-model:value="formState.description" allow-clear />
          </a-form-item>
          <a-form-item
            :label="t('project.logo.label')"
            name="logo"
            :rules="[{ required: true, message: t('project.logo.required') }]"
          >
            <base64-upload v-model:value="formState.logo" />
          </a-form-item>
          <a-form-item
            :label="t('project.footMsg.label')"
            name="footMsg"
            :rules="[{ required: true, message: t('project.footMsg.required') }]"
          >
            <a-input v-model:value="formState.footMsg" allow-clear />
          </a-form-item>
          <a-form-item
            :label="t('project.copyright.label')"
            name="copyright"
            :rules="[{ required: true, message: t('project.copyright.required') }]"
          >
            <a-input v-model:value="formState.copyright" allow-clear />
          </a-form-item>
          <a-form-item
            :label="t('project.repositoryType.label')"
            name="repositoryType"
            :rules="[{ required: true, message: t('project.repositoryType.required') }]"
          >
            <a-radio-group v-model:value="formState.repositoryType" class="radio-group">
              <a-radio-button value="github">
                <IconGithub class="anticon" />
                github
              </a-radio-button>
              <a-radio-button value="gitee">
                <IconGitee class="anticon" />
                gitee
              </a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            :label="t('project.repository.label')"
            name="repository"
            :rules="[
              { required: true, message: t('project.repository.required') },
              { validator: validateRepositoryUrl }
            ]"
          >
            <a-input v-model:value="formState.repository" allow-clear />
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="bottom-container">
      <a-button @click="back">{{ t('btn.cancel') }}</a-button>
      <a-button style="margin-left: 10px" type="primary" @click="handleSubmit"
        >{{ t('btn.create') }}
      </a-button>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-container {
  background: #f5f5f5;
  display: flex;
  flex: 15;
}

.bottom-container {
  border-top: 1px solid #e8e8e8;
  background: #f6f7f9;
  flex: 1;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 0 10px;
}

.left {
  flex: 2;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.left :deep(.ant-divider-horizontal) {
  margin: 10px 0 0 0;
}

.custom-menu :deep(.ant-menu-item) {
  padding-left: 10px !important;
}

.right {
  flex: 5;
  padding: 20px;
}

.right :deep(.ant-form) {
  width: 100%;
}

.right:deep(.ant-form-item-label) {
  text-align: start;
  font-size: 16px;
  font-weight: 400;
}

.right:deep(label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before) {
  /* display: none;*/
}

.input-folder {
  width: 18px;
  height: 18px;
  opacity: 0.5;
  cursor: pointer;
}

.input-folder:hover {
  background-color: #f5f5f5;
  opacity: 1;
}

.radio-group
  :deep(
    :where(.css-dev-only-do-not-override-19iuou).ant-radio-button-wrapper-checked:not(
        .ant-radio-button-wrapper-disabled
      )
  ) {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.radio-group :deep(.ant-radio-button-wrapper:hover) {
  color: var(--primary-color);
}

.radio-group
  :deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before) {
  background-color: var(--primary-color);
}
</style>
